import { Component } from 'react'
import { View, Text, Image, Swiper, SwiperItem, Button } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import Taro from '@tarojs/taro'
import cls from 'classnames'
import IconFont from '../../components/iconfont';
import { incomeToText } from '../../utils/income'
import { getHouseByValue } from '../../utils/house';
import { inject, observer } from 'mobx-react';
import { getMaritalStatusByValue } from '../../utils/maritalStatus'
import { minIncomeToText } from '../../utils/minIncome'
import { getHouseStatusByValue } from '../../utils/houseStatus'
import { getCarStatusByValue } from '../../utils/carStatus'
import { getHeightText } from '../../utils/height'
import { getAgeText } from '../../utils/age'
import './index.less'

const SHENG_XIAO_ICONS = [
  'shu',
  'niu',
  'hu',
  'tu',
  'long',
  'she',
  'ma',
  'yang',
  'hou',
  'ji',
  'gou',
  'zhu',
]

const getShengXiaoIconName = (year = "") => {
  if (!year) {
    return ''
  }

  const yearNum = Number.parseInt(year);
  const index = Math.abs(yearNum - 1900) % 12
  return SHENG_XIAO_ICONS[index]
}


@inject('store')
@observer
export default class accountDetail extends Component {
  state = {
    account: {},
    basicInfo: {},
    accountRequirement: null,
    certificationStatus: null
  }

  componentWillMount () { }

  componentDidMount () {
    // this.getAccountBaseInfo()
    // this.getAccountRequirement()
    this.submitRecentVisit();
  }

  submitRecentVisit = async () => {
    const { router } = Taro.getCurrentInstance()
    const { id: toAccountId } = router.params;
    const { id: fromAccountId } = this.props.store.userInfo

    const params = {   
      fromAccountId,
      toAccountId
    }
    const { success, data, msg } = await Taro.request({
			method: 'post',
			url: '/api/account/recent/visit',
			data: params
		})
  }

  getAccountDetaiData = async () => {
    const { router } = Taro.getCurrentInstance()
    const { id } = router.params;
    // TODO 获取用户详情信息
		const { success, data, msg } = await Taro.request({
			method: 'post',
			url: '/api/account/detail/page',
			data: {
        accountId: id
      }
		})
    if (success) {
      this.setState({
        ...data
      })
    }
  }

  componentWillUnmount () { }

  componentDidShow () {
    this.getAccountDetaiData();
   }

  componentDidHide () { }

  linkToAccountRequirement = () => {
    const { router } = Taro.getCurrentInstance()
    const { id } = router.params;
    Taro.navigateTo({
      url: `/pages/accountRequirement/index?id=${id}`,
    })
  }

  linkToAccountBasicInfo = () => {
    const { router } = Taro.getCurrentInstance()
    const { id } = router.params;
    Taro.navigateTo({
      url: `/pages/accountBasicInfo/index?id=${id}`,
    })
  }

  onShareAppMessage = () => {
    const { basicInfo } = this.state
    const {
      accountId,
      avatar
    } = basicInfo || {};
    return {
      title: '个人资料',
      path: `/pages/accountDetail/index?id=${accountId}`,
      imageUrl: avatar
    }

}

  render () {
    const { basicInfo, accountRequirement, account, certificationStatus } = this.state
    const { avatarUrl, nickName } = account || {}
    const { id } = this.props.store.userInfo
    const {
      avatar = "",
      lifePhotos = [],
      accountId,
      birthday = "",
      height,
      weight,
      occupation,
      education,
      workAreaCity,
      homeProvince,
      homeCity,
      minIncome,
      maxIncome,
      house,
      car,
    } = basicInfo || {};
    const idText = (accountId + "").padStart(5, "0")
    const images = [avatar, ...lifePhotos]
    const year = birthday.slice(0, 4)
    const shengXiaonIcon = getShengXiaoIconName(year)
    const incomeText = incomeToText(minIncome, maxIncome);
    const houseObj = getHouseByValue({ value: house })
    const houseText = houseObj?.name ?? '暂无';
    const carText = car ? '有车' : '暂无';
    const {
      minAge,
      maxAge,
      minHeight,
      maxHeight,
      maritalStatus: maritalStatusRequirement,
      minIncome: minIncomeRequirement,
      house: houseRequirement,
      car: carRequirement,
      education: educationRequirement,
    } = accountRequirement || {}
    const maritalStatusRequirementText = getMaritalStatusByValue({ value: maritalStatusRequirement })?.name
    const minIncomeRequirementText = minIncomeToText(minIncomeRequirement)

    const houseRequirementText = getHouseStatusByValue({ value: houseRequirement })?.name;
    const carRequirementText = getCarStatusByValue({ value: carRequirement })?.name;
    let heightText = getHeightText(minHeight, maxHeight)
    heightText = heightText || '不限'
    let ageText = getAgeText(minAge, maxAge)
    ageText = ageText || '不限'

    const { jobCertification, educationCertification, realNameCertification } = certificationStatus || {};

    const hasCertification = jobCertification == 1 || educationCertification == 1 || realNameCertification == 1

    const isSelf = id === accountId

    return (
      <View className='account-detail-page'>
        <Swiper
          className='swiper-photos'
          indicatorColor='#ccc'
          indicatorActiveColor='#8959e2'
          circular
          indicatorDots
          autoplay>
            {images.map((item, index) => {
              return (
                <SwiperItem key={index}>
                  <View className='swiper-photos-item'>
                    <Image
                      className='swiper-photos-item-img'
                      mode="aspectFill"
                      src={item}
                    />
                  </View>
                </SwiperItem>
              )
            })}
        </Swiper>

        <View className='account-info'>
          <View className='account-info-header'>
            <View className='account-info-header-title'>
              {nickName}
            </View>
            <View className='account-info-header-content'>
              <View  className='account-info-header-id'>
                ID: {idText || ''}
              </View>
            </View>
            {isSelf &&
              <View  className='account-info-header-edit'  onClick={this.linkToAccountBasicInfo}>
                编辑
              </View>
            }
          </View>
          <View className='account-info-body'>
            <View>
              <View className='info-tag'>
                <IconFont name='birthday' size={30} color='#333' />
                <View>{birthday.slice(2, 4)}年&nbsp;·&nbsp;
                </View>
                <IconFont name={shengXiaonIcon} size={30} color='#333' />
              </View>
              <View className='info-tag'>
                <IconFont name='user' size={30} color='#333' />
                <View>{height}cm · {weight}kg</View>
              </View>
            </View>

            <View>
              <View className='info-tag'>
                <IconFont name='gongwenbao' size={30} color='#333'/>
                <View>{occupation}</View>
              </View>
            </View>

            <View>
              <View className='info-tag'>
                <IconFont name='xueli' size={30} color='#333'/>
                <View>{education}</View>
              </View>
            </View>

            <View>
              <View className='info-tag'>
                <IconFont name='fangzi' size={30} color='#333'/>
                <View>现居{workAreaCity} · {homeProvince}{homeCity}人</View>
              </View>
            </View>
            <View>
              <View className='info-tag'>
                <IconFont name='hunyin' size={30} color='#333'/>
                <View>未婚</View>
              </View>
            </View>
            <View>
              <View className='info-tag'>
                <IconFont name='xinzifanwei' size={30} color='#333'/>
                <View>{incomeText}</View>
              </View>
              <View className='info-tag'>
                <IconFont name='loufangfangzi' size={30} color='#333'/>
                <View>{houseText}</View>
              </View>
              <View className='info-tag'>
                <IconFont name='qiche' size={30} color='#333'/>
                <View>{carText}</View>
              </View>
            </View>
          </View>
        </View>
        {hasCertification && (
          <View className='card'>
            <View className='card-header'>
              <View className='card-header-title'>
                信息认证
              </View>
            </View>
            <View className='card-body'>
              <View className='grid'>
                {realNameCertification == 1 &&
                  <View className='grid-item'>
                    <View className={cls('prove-item', {
                      active: true
                    })}>
                      <View className='icon-wrap shenfenrenzheng'>
                        <IconFont name='shenfenrenzheng' size={60} color={'#FFF'} />
                      </View>
                      <View className='prove-item-text'>
                        实名已认证
                      </View>
                    </View>
                  </View>
                }
                {jobCertification == 1 &&
                  <View className='grid-item'>
                    <View className='prove-item'>
                      <View className='icon-wrap zhengjian'>
                        <IconFont name='zhengjian' size={60} color={true ? '#FFF' : 'red'} />
                      </View>
                      <View className='prove-item-text'>
                        工作已认证
                      </View>
                    </View>
                  </View>
                }
                {educationCertification == 1 &&
                  <View className='grid-item'>
                    <View className='prove-item'>
                      <View className='icon-wrap xuelishuiping'>
                        <IconFont name='xuelishuiping' size={60} color={true ? '#FFF' : 'red'} />
                      </View>
                      <View className='prove-item-text'>
                        学历已认证
                      </View>
                    </View>
                  </View>
                }

                {/* <View className='grid-item'>
                  <View className='prove-item'>
                    <View className='icon-wrap'>
                      <IconFont name='shouru' size={60} color={true ? '#FFF' : 'red'} />
                    </View>
                    <View className='prove-item-text'>
                      收入未认证
                    </View>
                  </View>
                </View> */}
                {/* <View className='grid-item'>
                  <View className='prove-item'>
                    <View className='icon-wrap'>
                      <IconFont name='fangwufangchan' size={60} color={true ? '#FFF' : 'red'} />
                    </View>
                    <View className='prove-item-text'>
                      房屋未认证
                    </View>
                  </View>
                </View> */}
                {/* <View className='grid-item'>
                  <View className='prove-item'>
                    <View className='icon-wrap'>
                      <IconFont name='qiche' size={60} color={true ? '#FFF' : 'red'} />
                    </View>
                    <View className='prove-item-text'>
                      车辆未认证
                    </View>
                  </View>
                </View> */}
              </View>
            </View>
          </View>
        )}

        <View className='account-info'>
          <View className='account-info-header'>
            <View className='account-info-header-title'>
              择偶要求
            </View>
            <View className='account-info-header-content'></View>
            {isSelf &&
              <View  className='account-info-header-edit' onClick={this.linkToAccountRequirement}>
                编辑
              </View>
            }
          </View>
          <View className='account-info-body'>
            <View>
              <View className='info-tag'>
                <IconFont name='birthday' size={30} color='#333' />
                <View>{ageText}</View>
              </View>
              <View className='info-tag'>
                <IconFont name='user' size={30} color='#333' />
                <View>{heightText}</View>
              </View>
            </View>

            <View>
              <View className='info-tag'>
                <IconFont name='xueli' size={30} color='#333'/>
                <View>{educationRequirement}以上</View>
              </View>
            </View>

            <View>
              <View className='info-tag'>
                <IconFont name='hunyin' size={30} color='#333'/>
                <View>{maritalStatusRequirementText}</View>
              </View>
            </View>
            <View>
              <View className='info-tag'>
                <IconFont name='xinzifanwei' size={30} color='#333'/>
                <View>{minIncomeRequirementText}</View>
              </View>
              <View className='info-tag'>
                <IconFont name='loufangfangzi' size={30} color='#333'/>
                <View>{houseRequirementText}</View>
              </View>
              <View className='info-tag'>
                <IconFont name='qiche' size={30} color='#333'/>
                <View>{carRequirementText}</View>
              </View>
            </View>
          </View>
        </View>

        <View className='fix-btns'>
          {!!accountId && !!id && !isSelf &&
            <Button openType='contact' className='fix-btns-item'>
              <IconFont name='weixin' size={40} color='#FFF' />
              <View className='fix-btns-text'>加微信</View>
            </Button>
          }
          <Button openType='share' className='fix-btns-item'>
            <IconFont name='fenxiang' size={40} color='#FFF' />
            <View className='fix-btns-text'>分享</View>
          </Button>
        </View>
      </View>
    )
  }
}